<!doctype html>
<html lang="zh">
<head> 
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>学习强校新闻站</title>
	<link rel="stylesheet" href="boot/css/bootstrap.min.css">
	<style type="text/css">
		body { 
			text-align: center;
		}
		/*导航开始*/
		.nav {			
			height: 80px;
			margin-top: 2px;
			background:#e9e9e9 url(logo.png) no-repeat left center;
			background-size: auto 100% ;
			padding-left: 350px; 
		}	
		
		.nav ul li{display: inline-block;line-height: 80px;margin: 0 10px}
		.nav ul li a{font-size:20px;font-weight: bold;text-decoration: none;color: black}
		.phone{
			height: 80px;line-height: 80px;
			float: right;padding-right:30px; 
			display: none;
		}

		/*导航结束*/
		/*第一行开始*/
		.one{
			height: 400px;
			padding-top: 100px;
			background: url('images/bg1.jpg') no-repeat;
			background-size: cover;
			color: white;
		}
		.one h1{
			font-weight: 100;
    		font-size: 72px;
		}
		.one h3{
			color: hsla(0,0%,100%,.7);
			font-size: 24px;
		}
		/*第一行结束*/
		/*第二行开始*/
		.two{margin: 0 auto;width: 100%;}		
		.news{width: 25%;float: left;}		
		.news_item{
			width: 95%;margin: 0 auto;
			border: 2px solid #e9e9e9;
		    border-radius: 3px;
		    padding: 50px 15px 48px;
		    height: 300px;overflow: hidden;
		}
		.news_item--title {    font-size: 20px;}		
		.news_item--text {
		    font-size: 16px;
		    color: #969696;
		    line-height: 23px;
		}
		.icon{font-size: 80px;color:#19a7f0}
		/*第二行结束*/
		/*第3行开始*/
		.three{
			clear: both;
			padding-top: 30px;
		    height: 300px;
		
		}
		.slide{    
			background: url(images/bg3.png);
		    background-size: cover;
		    height: 100%;
		    padding: 50px 30px 0;
		}
		.slide_simple--title {
		    font-size: 46px;
		    color: #fff;
		    text-align: center;
		    font-weight: 400;
		}
		.slide_simple--text {
		    font-size: 18px;
		    line-height: 36px;
		    opacity: .8;
		    margin: 28px 0 0;
		    color: #fff;
		}
		/*第3行结束*/
		/*第4行开始*/
		.four{			  
			background:#e9e9e9;overflow: hidden;
		}
		.features{width: 25%;float: left;height: 200px;color: white}
		.features_item{height: 100%;width: 80%;margin: 0 auto;padding:20px 20px;}
		.fi1{background: url(images/f01.jpg) no-repeat; background-size: cover;}
		.fi2{background: url(images/f02.jpg) no-repeat; background-size: cover;} 
		.fi3{background: url(images/f03.jpg) no-repeat; background-size: cover;}
		.fi4{background: url(images/f04.jpg) no-repeat; background-size: cover;}


		/*第4行结束*/
		/*第5行开始*/
		.five{
			clear: both;
			height: 400px;
			padding-top: 20px;		
			color: black;
		}
		.earth{
			background: url('images/bg4.png') no-repeat;
			background-size: cover;
			height: 100%; 
			padding-top:100px;
		}
		.earth h1{
			font-weight: 400;
    		font-size:40px;
		}
		.earth h3{		
			font-size: 18px;
		}
		/*第5行结束*/   
		/*第6行开始*/
		.six{overflow: hidden;background:#e9e9e9  }
		.contact{		
		    width: 33.33%;
		    float: left;
		}  
		.contact_card {
		    background: #fff;
		    border: 1px solid #e9e9e9;
		    border-radius: 3px;
	
		    padding: 80px 0 48px;
		    margin: 30px;
		}u
		.contact_card img{width: 65px;height: 65px;}
		.contact_card--title {
		    font-size: 20px;
		    display: inline-block;
		}
		.contact_card--text {
		    padding: 0 0 10px;
		    color: #969696;
		    font-size: 16px;
		    line-height: 23px;
		}
		/*第6行结束*/
		/*尾部开始*/
		.footer{
			background: #383d61;color:white;
			height: 50px;text-align: center;
			line-height: 50px;font-size: 20px;
			font-weight: bold;
		}
		/*尾部结束*/
		@media(max-width: 992px) and (min-width: 768px) {
			/*导航*/
			.nav ul{display: none;}
			.phone{display: block}
			/*第一行*/
			.one{
				height: 300px;}
			.one h1{		
	    		font-size: 48px;
			}
			.one h3{			
				font-size: 16px;
			}
			/*第二行*/
			.news{width: 50%}
			/*第四行*/
			.features{width: 50%;}

		}
		/*手机端*/
		@media(max-width: 768px){

			/*导航*/
			.nav ul{display: none;}
			.phone{display: block}
			.nav {padding-left:0;background-size: 60% auto; }
			/*第一行*/
			.one{
				padding: 0 10px;
				color: black;
				height: 150px;
				background:orange;				
				padding-top:18px;
			}
			.one h3{display: none;}
			.one h1{		
	    		font-size: 32px;
			}
			/*第二行*/
			.news{width:100%}
			.news_item--text{display: none}
			/*第三行*/
			.slide_simple--title{font-size: 30px}
			.slide_simple--text{display: none;}
			/*第四行*/
			.features{width: 100%;}			
			.features_item{width: 100%;padding:20px}			
			/*第五行*/
			.five{		
				height: 200px;						
			}
			.earth{padding: 40px 20px 0;color: white}
			.earth h1{				
		    	font-size:24px;
			}
			.earth h3{		
				display: none;
			}
			/*第六行*/
			.contact{		
			    width:100%;
			}
			.contact_card{padding: 10px; margin: 2px;}
			/*页脚*/
			.footer{font-size: 12px;}
		}



	</style>
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>

	<div class="nav">
		<ul>
			<li><a href="#one">首页</a></li>
			<li><a href="#two">头条新闻</a></li>
			<li><a href="#three">学习新思想</a></li>
			<li><a href="#four">学习科学</a></li>
			<li><a href="#five">环球视野</a></li>
			<li><a href="#six">联系我们</a></li>
		</ul>	
		<div class="phone"><img src="nav.png"></div>
	</div>

	<div class="one" id="one">	 
			<h1>让五四精神在新时代放射新的光芒</h1> 
			<h3>青年兴则国家兴，青年强则国家强</h3> 	
	</div>
	<h2>头条新闻</h2>
	<hr>
	<div class="two" id="two">
		<div class="news">
			<div class="news_item">			
				
				<span class="glyphicon glyphicon-time icon" ></span>
				<br>
				<h1  class="news_item--title">要用绿水青山定调发展的底色</h1>
				<p class="news_item--text">三江源国家公园体制试点建设以来，环境保护合力集聚形成，绿色生活方式日益普及。</p>		
			
			</div>
		</div>
		<div class="news">
			<div class="news_item">
				<span class="glyphicon glyphicon-screenshot icon" ></span>
				<br>
				<h1  class="news_item--title">一带一路建设走向高质量发展</h1>
				<p class="news_item--text">来自80多个国家和地区的政府、企业和有关国际组织的近900名中外代表齐聚北京，参加首届企业家大会。</p>
			</div>
		</div>
		<div class="news">
			<div class="news_item">
				<span class="glyphicon glyphicon-refresh icon" ></span>
				<br>
				<h1 class="news_item--title">奋斗在脱贫攻坚一线的女汉子</h1>
				<p class="news_item--text">脱贫攻坚工作是一项复杂的系统工程，甘当为贫困户拜托困难，筑建幸福路上的一粒沙。</p>
			</div>
		</div>
		<div class="news">
			<div class="news_item">
				<span class="glyphicon glyphicon-thumbs-up icon" ></span>
				<br>
				<h1  class="news_item--title">奋斗，是对祖国最深情的告白</h1>
				<p class="news_item--text">唯有奋斗，才能让险阻变通途。无论顺境逆境，无论阳光风雨，我们永远与祖国在一起！</p>
			</div>
		</div>
	</div>
	<div class="three" id="three">
		<div class="slide">
			<h1 class="slide_simple--title">@所有青年 习近平教你如何接过历史的接力棒</h1>
        	<p class="slide_simple--text">总书记希望各国青年用欣赏、互鉴、共享的观点看待世界，推动不同文明交流互鉴、和谐共生，积极为构建人类命运共同体添砖加瓦！</p>
		</div>
        
    </div>
    <h2>学习科学</h2>
	<hr>
	<div class="four" id="four">
        <div class="features">
            <div class="features_item fi1">
				<h3 class="features_item--title">文化与艺术</h3>
				<p class="features_item--text">
					文化基因和精神家园是一个民族安身立命的基础、生存发展的支撑，构成了中华民族共同精神家园的重要组成部分。
				</p>
			</div>
        </div>
        <div class="features">
            <div class="features_item fi2">
				<h3 class="features_item--title">人工智能+大数据</h3>
				<p class="features_item--text">
					我们正处在一个信息化与智能化交集的时代, IoT、人工智能、区块链、大数据等技术创新是信息产业发展的阶段性成果。
				</p>
								
			</div>
        </div>
        <div class="features">
            <div class="features_item fi3">
				<h3 class="features_item--title">中医药</h3>
				<p class="features_item--text">中医药，是反映中华民族对生命、健康和疾病的认识，具有悠久历史传统和独特理论及技术方法的医药学体系。</p>
			</div>
        </div>
        <div class="features">
            <div class="features_item fi4">
				<h3 class="features_item--title">经济金融</h3>
				<p class="features_item--text">
					经济学对理解与指导中国经济的改革与发展、对帮助人们在日常工作与生活中进行理性决策都具有十分重要的作用。</p>
			</div>
        </div>
    </div>
    <div class="five" id="five">
    	<div class="earth">
    		<h1>特朗普下绞杀令1天后，俄罗斯以实际行动力挺华为</h1> 
			<h3>俄罗斯电信巨头维佩尔通讯公司认为，中国华为的设备不存在安全隐患，并称为准备启用5G，其莫斯科电信网络正在全面改用华为设备。</h3> 	
    	</div>
    
    </div>


	<div class="six" id="six">    
       <div class="contact">
         	<div class="contact_card">
				<img src="images/telphone.png" >
				<strong class="contact_card--title">联系我们</strong>
				<p class="contact_card--text">拨打我们的电话<br> <strong>(+00)(000)000000</strong> <br> 周一 - 周五, 8:00 - 20:00</p>
			</div>
       </div>
       <div class="contact">
         	<div class="contact_card">
				<img src="images/email.png">
				<strong class="contact_card--title">电子邮箱</strong>
				<p class="contact_card--text">给我们发送电子邮件 <br> <strong><a href="mailto:info@financed.com">kefu@qq.com</a>,</strong> <br> 我们会尽快回复您.</p>
			</div>
       </div>
       <div class="contact">
         	<div class="contact_card">
				<img src="images/address.png">
				<strong class="contact_card--title">地址信息</strong>
				<p class="contact_card--text">办公地址 <br> <strong>中国国际大厦</strong> <br> 8栋B座A88</p>
			</div>
       </div>   
    </div>
	<div class="footer">@版权所有 前端开发工程师项目组</div>

</body>
</html>